<template>
  <div class="div">
    <p>hello world world</p>
    <p>isShow {{ isShow }}</p>
    <p>num {{ num }}</p>
    <p>show {{ show }}</p>
    <p>tt {{ tt }}</p>
    <p>hello {{ mpShow }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  name: 'index',
  data () {
    return {
      num: this.$store.state.footerStatus.changeNum,
      show: this.$store.state.footerStatus.show,
      tt: this.$store.state.footerStatus.show
    }
  },
  created () {
    this.getBreadcrumb()
  },
  computed: {
    isShow () {
      return this.$store.getters.isShow
    },
    ...mapState({
      mpShow: state => state.footerStatus.show
    })
  },
  mounted () {
    console.log(this.$store)
  },
  methods: {
    getBreadcrumb () {
      // only show routes with meta.title
      console.log('matched', this.$route.matched)
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      const first = matched[0]

      if (!this.isDashboard(first)) {
        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
      }

      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    }
  }
}
</script>

<style>
</style>
